<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf" ><div class="cell" style="font-size:14px">属性</div></th>
                  <th class="is-leaf"><div class="cell"  style="font-size:14px" >值</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><span class="cell" style="font-size:14px">CPU核心数</span></td>
                  <td>
                    <span class="cell" style="font-size:14px">{{server.cpu.cpuNum}}</span>
                  </td>
                </tr>
                <tr>
                  <td><span class="cell" style="font-size:14px">用户使用率</span></td>
                  <td><span class="cell" style="font-size:14px">{{ server.cpu.used }}%</span></td>
                </tr>
                <tr>
                  <td><span class="cell" style="font-size:14px">系统使用率</span></td>
                  <td><span class="cell" style="font-size:14px">{{ server.cpu.sys }}%</span></td>
                </tr>
                <tr>
                  <td><span class="cell" style="font-size:14px">当前CPU空闲率</span></td>
                  <td><span class="cell" v-if="server.cpu" style="font-size:14px;">{{ server.cpu.free }}%</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="is-leaf"><div class="cell" style=" font-size:14px">属性</div></th>
                  <th class="is-leaf"><div class="cell" style=" font-size:14px">内存</div></th>
                  <th class="is-leaf"><div class="cell" style=" font-size:14px">JVM</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><div class="cell" style="font-size:14px">系统总内存</div></td>
                  <td><div class="cell" v-if="server.mem" style="font-size:14px">{{ server.mem.total }}G</div></td>
                  <td><div class="cell" v-if="server.jvm" style="font-size:14px">{{ server.jvm.total }}M</div></td>
                </tr>
                <tr>
                  <td><div class="cell" style="font-size:14px">当前已用内存</div></td>
                  <td><div class="cell" v-if="server.mem" style="font-size:14px">{{ server.mem.used}}G</div></td>
                  <td><div class="cell" v-if="server.jvm" style="font-size:14px">{{ server.jvm.used}}M</div></td>
                </tr>
                <tr>
                  <td><div class="cell" style="font-size:14px">剩余内存</div></td>
                  <td><div class="cell" v-if="server.mem" style="font-size:14px">{{ server.mem.free }}G</div></td>
                  <td><div class="cell" v-if="server.jvm" style="font-size:14px">{{ server.jvm.free }}M</div></td>
                </tr>
                <tr>
                  <td><div class="cell" style="font-size:14px">使用率</div></td>
                  <td><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}" style="font-size:14px">{{ server.mem.usage }}%</div></td>
                  <td><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}" style="font-size:14px">{{ server.jvm.usage }}%</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" class="card-box">
        <el-card  style="height:298px;overflow-y:auto;overflow-x:hidden;">
          <el-table
            :data="server.process"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            style="width: 100%"
            height="298"
          >
            <el-table-column
              prop="name"
              label="进程名称"
              width="165" >
            </el-table-column>
            <el-table-column
              prop="pid"
              label="PID"
              width="120">
            </el-table-column>
            <el-table-column
              prop="cpu"
              label="CPU(%)"
              width="120">
            </el-table-column>
            <el-table-column
              prop="vsz"
              label="VSZ"
              width="120">
            </el-table-column>
            <el-table-column
              prop="rss"
              label="RSS"
              width="110">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card  style="height:298px;overflow-y:auto;overflow-x:hidden;">
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
              <tr>
                <td><div class="cell" style="font-size:14px">主机名</div></td>
                <td><div class="cell" v-if="server.network" style="font-size:14px">{{ server.network.hostName }}</div></td>
              </tr>
              <tr>
                <td><div class="cell" style="font-size:14px">DNS</div></td>
                <td><div class="cell" v-if="server.network" style="font-size:14px">{{ server.network.dnsservers }}</div></td>
              </tr>
              <tr>
                <td><div class="cell" style="font-size:14px">IPv4网关</div></td>
                <td><div class="cell" v-if="server.network" style="font-size:14px">{{ server.network.ipv4 }}</div></td>
              </tr>
              <tr>
                <td><div class="cell" style="font-size:14px">IPv6网关</div></td>
                <td><div class="cell" v-if="server.network" style="font-size:14px">{{ server.network.ipv6 }}</div></td>
              </tr>
              <tr>
                <td><div class="cell" style="font-size:14px">域名</div></td>
                <td><div class="cell" v-if="server.network" style="font-size:14px">{{ server.network.domainName}}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card  style="height:298px;overflow-y:auto;overflow-x:hidden;">
    <el-table
      :data="server.networkInterfaces"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="网络接口名称 "
        width="100" >
      </el-table-column>
      <el-table-column
        prop="macaddress"
        label="mac地址"
        width="200">
      </el-table-column>
      <el-table-column
        prop="mtu"
        label="最大传输单元"
        width="100">
      </el-table-column>
      <el-table-column
        prop="speed"
        label="传输速度"
        width="100">
      </el-table-column>
      <el-table-column
        prop="ipv4"
        label="IPv4网关"
        width="125">
      </el-table-column>
      <el-table-column
        prop="ipv6"
        label="IPv6网关"
        width="230">
      </el-table-column>
      <el-table-column
        prop="received"
        label="发送包数"
        width="130">
      </el-table-column>
      <el-table-column
        prop="receivedPackets"
        label="发送包大小"
        width="130">
      </el-table-column>
      <el-table-column
        prop="receivedErr"
        label="发送包错误数"
        width="100">
      </el-table-column>
      <el-table-column
        prop="transmitted"
        label="接收包数"
        width="130">
      </el-table-column>
      <el-table-column
        prop="transmittedPackets"
        label="接收包大小"
        width="130">
      </el-table-column>
      <el-table-column
        prop="transmittedPacketsErr"
        label="接收包错误数"
        width="100">
      </el-table-column>
    </el-table>
    </el-card>
  </div>
</template>

<script>
import { getServer } from "@/api/monitor/server";

export default {
  name: "Server",
  data() {
    return {
      // 加载层信息
      loading: [],
      // 服务器信息
      server: []
    };
  },
  created() {
    this.getList();
    this.openLoading();
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
      getServer().then(response => {
        console.log(response.data);
        this.server = response.data;
        this.loading.close();
      });
    },
    // 打开加载层
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "读取操作系统中",
        // spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-table {
  tbody tr:hover>td {
    background-color: #a5c3e7
  }
}
.treeScrollbar::-webkit-scrollbar-track-piece {
  //滚动条凹槽的颜色，还可以设置边框属性
  background-color: #f1f1f1;
}

.treeScrollbar::-webkit-scrollbar {
  //滚动条的宽度
  width: 10px;
  height: 10px;
}

.treeScrollbar::-webkit-scrollbar-thumb {
  //滚动条的设置
  background-color: #c1c1c1;
  background-clip: padding-box;
  min-height: 28px;
  border-radius: 8px;
}

.treeScrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}
</style>
